<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '宿舍信息',
    navigationBarTextStyle: '#000000',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#ffffff',
  },
}
</route>

<template>
  <view class="content">
    <view class="topBox">
      <view class="item">固定宿舍（{{ num1 }}）</view>
      <view class="item">流动客房（{{ num2 }}）</view>
      <view class="item2 align-middle flexBox" @click="goAdd">
        <view class="mr-[5upx]">
          <wd-icon name="add" size="22px" color="#0083ff"></wd-icon>
        </view>
        添加宿舍
      </view>
    </view>
    <view class="px-[40upx]">
      <view class="dataItem" v-for="item in dataList" :key="item.id" @click="() => goDetail(item)">
        <view class="item-top mb-[20upx]">{{ item.roomNo }}</view>
        <view class="item-text flexBox px-[15upx]">
          <view class="mr-[20upx]">
            <wd-img :width="70" :height="70" :src="item.roomPic || img" />
          </view>
          <view class="w-[80%]">
            <view class="flexBox2 mb-[20upx]">
              <view class="w-[120upx]">类型：</view>
              <view>{{ item.roomType }}</view>
            </view>
            <view class="flexBox2">
              <view class="w-[120upx]">设施：</view>
              <view class="textBox">{{ item.facilityNo }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="js" setup>
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
import { getHotelList } from '@/api/administration/hostelInfo.js'
import img from '@/static/swaper/swiper1.png'
import { useAdministrationStore } from '@/store'

defineOptions({
  name: 'HostelInfo',
})

const administrationStore = useAdministrationStore()
const dataList = ref([])
const num1 = ref(0)
const num2 = ref(0)
onShow(() => {
  getList()
})

const goAdd = () => {
  administrationStore.setDormitoryInfo({})
  uni.navigateTo({ url: '/pages/administration/hostelInfo/addHostel' })
}

// 点击进入详情
const goDetail = (item) => {
  administrationStore.setDormitoryInfo({
    ...item,
    facilityIdList: item.facilityId ? item.facilityId.split(',') : [],
    fileList: item.roomPic ? [{ url: item.roomPic, response: item.roomPic }] : [],
  })
  uni.navigateTo({ url: `/pages/administration/hostelInfo/addHostel` })
}

// 获取数据
const getList = async () => {
  const res = await getHotelList({
    pageNum: 1,
    pageSize: 10000,
  })
  dataList.value = res.data.rows || []
  let code = 0
  let code2 = 0
  dataList.value.forEach((item) => {
    if (item.roomType == '固定宿舍') {
      code++
    } else {
      code2++
    }
  })
  num1.value = code
  num2.value = code2
  console.log(res, '获取宿舍信息')
}
</script>

<style lang="scss" scoped>
.flexBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flexBox2 {
  display: flex;
  align-items: center;
  .textBox {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.content {
  background-color: #f1f1f1;
  min-height: 100vh;
  padding-top: 120upx;
  .topBox {
    height: 100upx;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100vw;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      width: 35%;
      text-align: center;
      border-right: 1px solid #e5e5e5;
    }
    .item2 {
      width: 30%;
      color: #0083ff;
    }
  }
  .dataItem {
    background-color: white;
    box-shadow: 0 4upx 8upx rgba(0, 0, 0, 0.1);
    border-radius: 20upx;
    padding: 20upx 10upx;
    margin-bottom: 30upx;
    .item-top {
      padding: 20upx;
      border-bottom: 1px solid #e5e5e5;
    }
  }
}
</style>
